<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="用户备注">
        <span>{{currentModel.complaintRemark || '未填'}}</span>
      </el-form-item>
      <el-form-item v-if="currentModel.complaintProof && currentModel.complaintProof.length" label="投诉图片">
        <template v-for="(item) in currentModel.complaintProof">
          <el-popover placement="left" trigger="hover" :key="item" style="margin: 0 5px">
            <el-image
              slot="reference"
              fit="cover"
              :src="item"
              :alt="item"
              style="max-height: 70px; max-width: 100px"
            ></el-image>
            <el-image fit="cover" :src="item" style="width: 500px"></el-image>
          </el-popover>
        </template>
      </el-form-item>
      <el-form-item label="处理意见">
        <el-input 
          type="textarea" 
          placeholder="请输入内容" 
          v-model="textarea" 
          rows="5" 
          show-word-limit 
          maxlength="200"
          :readonly="status == 0">
        </el-input>
      </el-form-item>
      <el-form-item label="处理人" v-if="status != 0">
        <el-select
          style="width: 240px"
          v-model="handleUserId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in userList"
            :key="dict.id"
            :label="dict.userName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="status != 0">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="!textarea || !handleUserId">{{ titleText }}投诉</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { complaintUpdate, queryComplaintResult } from "@/api/reviewActivities/memberManage";
import { getSaleUser } from "@/api/reviewActivities/pushCode";

export default {
  components: {},
  props: {
    currentModel: {
      type: Object,
      default() {
        return {};
      },
    },
    id: {
      type: String,
      default: "",
    },
    status: {
      type: String,
      default: "1",
    },
    tableName:{
      type: Number,
      default: '',
    }
  },
  data() {
    return {
      textarea: "",
      handleUserId: '',
      userList: [],
    };
  },
  created() {
    getSaleUser().then(({data}) => {
      if (data.isSuccess) {
        this.userList = data.content.rows
      }
    })
    if (this.status == 0) {
      queryComplaintResult({ id: this.id,tableName: this.tableName, }).then(({ data }) => {
        this.textarea = data.successMessage;
      });
    }
  },
  mounted() {},
  watch: {},
  computed: {
    titleText() {
      return this.status == "1" ? "确认" : "驳回";
    },
  },
  methods: {
    submitForm() {
      complaintUpdate({
        id: this.id,
        handleUserId: this.handleUserId,
        handleOpinions: this.textarea,
        complaintStatus: this.status,
        tableName: this.tableName,
      }).then(({ data }) => {
        if (data.isSuccess) {
          this.$message.success(`${this.titleText}成功！`);
          this.close();
          this.$emit("refresh");
        } else {
          this.$message.error(`${this.titleText}失败！`);
        }
      });
    },
    close() {
      this.$emit("togglePop");
    },
  },
};
</script>
<style></style>
